<template>
  <div class="serach-item">
    <van-row gutter="20">
      <van-col span="4">
        <van-image class="avatar" :src="movie.image">
          <template v-slot:error>
            <img
              class="avatar"
              src="https://cdn.pixabay.com/photo/2020/09/25/16/50/portrait-5601950_960_720.jpg"
            />
          </template>
        </van-image>
      </van-col>
      <van-col span="20">
        <van-row>
          <van-col span="24"
            ><div class="title">{{ movie.title }}</div></van-col
          >
        </van-row>
        <van-row>
          <van-col span="24"><Star :rating="movie.rating" /></van-col>
        </van-row>

        <van-row>
          <van-col span="24"
            ><div class="info">{{ movie.info }}</div></van-col
          >
        </van-row>
      </van-col>
    </van-row>
    <van-divider />
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Star from "../components/Star";
import { Row, Col, Divider, Image } from "vant";
export default defineComponent({
  components: {
    Star,
    [Row.name]: Row,
    [Col.name]: Col,
    [Divider.name]: Divider,
    [Image.name]: Image,
  },
  props: ["movie"],
});
</script>

<style scoped>
.serach-item {
  padding-left: 20px;
}
.title {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 16px;
  text-align: left;
  font-weight: bold;
}
.avatar {
  width: 60px;
  height: 80px;
}
.info {
  font-size: 14px;
  color: #999999;
  text-align: left;
}
.van-col {
  margin-bottom: 10px;
}
</style>
